<template>
  <div class="app-container app-containerrole containerroleresources">
      <el-card class="box-card" style="width: 80%">
      <div slot="header" class="clearfix"><span>资源列表</span></div>
        <el-tree
          :data="data"
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
          :render-content="renderContent">
        </el-tree>
      </el-card>

    <!--添加修改弹出层-->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" >
      <el-form :rules="rules" ref="dataForm" :model="temp" label-position="left" label-width="80px" style='width: calc(100% - 100px); margin-left:50px;; margin-right:50px'>
        <el-input v-model="temp.id" v-show="false"></el-input>
        <el-input v-model="temp.pid" v-show="false"></el-input>
        <el-form-item label="资源名称" prop="name">
          <el-input size="small" v-model="temp.name"></el-input>
        </el-form-item>
        <el-form-item label="权限标识" prop="url">
          <el-input size="small" v-model="temp.url"></el-input>
        </el-form-item>
        <!-- <el-form-item label="排序" prop="sort">
          <el-input size="small" v-model="temp.sort"></el-input>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button v-if="dialogStatus=='create'" type="primary" @click="append">提交</el-button>
        <el-button v-else type="primary" @click="updateData">更新</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
let id = 1000;
import {
  getTree,
  create,
  update,
  queryInfo,
  deleteById
} from "@/api/resources";
export default {
  name: "resources",
  components: {},
  data() {
    return {
      data: null,
      dialogFormVisible: false,
      dialogStatus: "",
      textMap: {
        update: "更新",
        create: "添加"
      },
      temp: {
        id: null,
        name: null,
        url: null,
        sort: null,
        pid: null,
        data: null
      },
      rules: {
        name: [
          { required: true, message: "请输入资源名称", trigger: "blur" }
        ],
        url: [
          { required: true, message: "请输入资源名称", trigger: "blur" }
        ],
        sort: [
          { required: true, message: "请输入排序", trigger: "blur" }
        ]
      }
    };
  },
  mounted: function() {
    this.queryData();
  },
  methods: {
    queryData() {
      getTree().then(response => {
        this.data = response.data;
      });
    },
    handleCreate(data) {
      this.resetTemp();
      this.temp.data = data;
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },
    append() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.temp.pid = this.temp.data.id;
          create(this.temp).then(() => {
            const newChild = {
              label: this.temp.name,
              url: this.temp.url,
              children: []
            };
            if (!this.temp.data.children) {
              this.$set(this.temp.data, "children", []);
            }
            this.temp.data.children.push(newChild);
            this.dialogFormVisible = false;
            this.$notify({
              title: "成功",
              message: "创建成功",
              type: "success",
              duration: 2000
            });
          });
        }
      });
    },
    handleUpdate(data) {
      queryInfo(data.id).then(response => {
        this.temp = Object.assign({}, response.data);
        this.dialogStatus = "update";
        this.dialogFormVisible = true;
        this.$nextTick(() => {
          this.$refs["dataForm"].clearValidate();
        });
      });
    },
    updateData() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          const tempData = Object.assign({}, this.temp);
          update(tempData).then(() => {
            this.queryData();
            this.dialogFormVisible = false;
            this.$notify({
              title: "成功",
              message: "更新成功",
              type: "success",
              duration: 2000
            });
          });
        }
      });
    },
    remove(node, data) {
      const loading = this.$loading({
        lock: true,
        text: "提交中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      setTimeout(() => {
        loading.close();
      }, 800);
      this.$confirm("删除后不可恢复, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteById(data.id).then(() => {
          const parent = node.parent;
          const children = parent.data.children || parent.data;
          const index = children.findIndex(d => d.id === data.id);
          children.splice(index, 1);
          this.$notify({
            title: "成功",
            message: "删除成功",
            type: "success",
            duration: 2000
          });
        });
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消"
        });
      });
    },
    renderContent(h, { node, data, store }) {
      return (
        <span class="custom-tree-node">
          <span>{node.label}</span>
          <span>
            <el-button
              size="medium"
              type="text"
              on-click={() => this.handleCreate(data)}
            >
              添加
            </el-button>
            <el-button
              size="medium"
              type="text"
              on-click={() => this.handleUpdate(data)}
            >
              修改
            </el-button>
            <el-button
              size="medium"
              type="text"
              on-click={() => this.remove(node, data)}
            >
              删除
            </el-button>
          </span>
        </span>
      );
    },
    resetTemp() {
      this.temp = {
        id: null,
        name: null,
        url: null,
        sort: null,
        pid: null,
        data: null
      };
    }
  }
};
</script>
<style>
.containerroleresources {
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-containerrole .el-input {
  min-width: 50px;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
